/*
npm i -g sass
sass --version
sass -i

type-of(任意内容)

number
    100
    100px
string
    '100'
    '100px'
    'hello'
    hello
    'red'
color
    red
    #fff
    rgb(255,0,0)
    hsl(red,10%,50%)
list
    1px solid red
    10px 20px
*/

// -------------------------- number
div {
    width: 10 + 2px;
    // width: 10px * 2px;
    // width: 10 + 2;
    // width: 10 / 2px;
    // width: (10 / 2)px;
    // width: 10px / 2px;

    // width: abs(10);
    width: abs(10px);
    width: abs(-10px);

    width: round(3.5px);
    width: round(3.4px);

    width: ceil(3.5px);
    width: floor(3.5px);

    width: percentage(20px / 50px);

    width: min(1,2,3);
    width: max(1,2,3);
}

// -------------------------- string
/*
hello + world    // "helloworld"
hello + 'world'  // "helloworld"
hello + 100      // "hello100"
hello / world    // "hello/world"
hello * world    // 报错，因为没有意义

$test: "hello world";
$test
to-upper-case($test)
to-lower-case($test)
str-index($test, "e")
str-length($test)
str-insert($test, "abc", 12)
*/

// -------------------------- color
/*
Hex
    #ff0000
RGB
    rgb(0,0,255)
HSL
    hsl(255, 50%, 50%)
String
    red、black、orange

rgb(红,绿,蓝)
rgba(红,绿,蓝,透明度)
    颜色：0~255 或 百分比
    透明度：0~1

hsl(色相, 饱和度, 明亮度)
hsla(色相, 饱和度, 明亮度, 透明度)
    色相（0~360）
    饱和度，也叫纯度（0~100%，鲜艳~灰暗）
    亮度（0~100%，白-黑）
    透明度（0~1）

adjust-hue(颜色,色相)
darken(颜色, 暗度)
ligten(颜色, 亮度)
saturate(颜色, 增加饱和度)
desaturate(颜色, 减少饱和度)
opacify(颜色, 不透明度)
transparentize(颜色, 透明度)

$my-color: #fff123;
color: adjust-hue($my-color, 137deg);
color: ligten($my-color, 10%);
color: darken(red, 50%);
color: saturate(red, 10%)
color: desaturate(red, 10%)
opacify(red, 0.3)
transparentize(red, 0.8)
*/

// -------------------------- list
/*
list类型：空格、逗号连接的多个值
    boder: 1px solid red;
    font-family: '黑体','宋体','微软雅黑';
    padding: 1px 2px 0 3px;
    padding: 1px 2px, 0 3px;
    padding: (1px 2px) (0 3px);

length(list)
nth(list, index)
index(list, value)
append(list, value)
join(list1, list2, space)  // space是默认的，可以省略
join(list1, list2, comma)
*/

// -------------------------- map
/*
map类型：多个键值对组成 (k1:v1, k2:v2, k3:v3, ...)
$colors: (light: #fff, dark: #eee)

length(map)
map-get(map, key)
map-keys(map)
map-values(map)
map-has-key(map, key)
map-merge(map1, map2)
map-remove(map, key1, key2, ...)
*/

// -------------------------- 布尔
/*
布尔类型：结果true、false
比较运算 > >= < <= ==
与或非 and or not

not(10px > 5px)
(3px < 4px) and (1px > 4px)
*/